<template>
  <!--开票管理-->
  <div class="statistics-container">
    <vab-query-form>
      <vab-query-form-left-panel :span="2">
        <el-button type="primary" icon="el-icon-download" @click="handleExport">
          导出
        </el-button>
      </vab-query-form-left-panel>
      <vab-query-form-right-panel :span="22">
        <el-form :inline="true" :model="queryForm" @submit.native.prevent>
<!--          <el-form-item>
            <div style="width: 80px">平台账号:</div>
          </el-form-item>-->
          <el-form-item>
            <el-input
              v-model.trim="queryForm.account"
              style="width: 180px"
              placeholder="请输入平台账号"
              clearable
            />
          </el-form-item>
<!--          <el-form-item>
            <div style="width: 80px">企业名称:</div>
          </el-form-item>-->
          <el-form-item>
            <el-input
              v-model.trim="queryForm.name"
              style="width: 180px"
              placeholder="请输入企业名称"
              clearable
            />
          </el-form-item>
<!--          <el-form-item>
            <div style="width: 80px">开票状态：</div>
          </el-form-item>-->
          <el-form-item>
            <el-select
              v-model="queryForm.status"
              clearable
              placeholder="请选择开票状态"
              style="width: 180px"
            >
              <el-option
                v-for="item in statu"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
<!--          <el-form-item>
            <div style="width: 120px">开票科目编号：</div>
          </el-form-item>-->
          <el-form-item>
            <el-select
              v-model="queryForm.num"
              clearable
              placeholder="请选择开票科目编号"
              style="width: 180px"
            >
              <el-option
                v-for="item in num"
                :key="item.value"
                :label="item.text"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="search">
              查询
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-refresh-right"
              @click="restart"
            >
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-right-panel>

    </vab-query-form>

    <el-table
      id="out-table"
      v-loading="listLoading"
      :data="list"
      @selection-change="setSelectRows"
    >
      <el-table-column
        align="center"
        show-overflow-tooltip
        label="序号"
        sortable
        type="index"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="mobile"
        label="平台账号"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="company_name"
        label="企业名称"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="subject_id_text"
        label="开票科目编号"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="total_money"
        label="价税合计总额"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="billing_date"
        label="开票月份"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="status"
        label="开票状态"
      />
      <el-table-column align="center" label="操作" width="200px">
        <template #default="{ row }">
          <el-button type="text" @click="detail(row)">详情</el-button>
          <el-button v-if="false" type="text" @click="pics(row)">
            完税证明
          </el-button>
          <el-dropdown style="color: #1890ff">
            <span class="el-dropdown-link">
              更多
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="arrow(row)">
                通过
              </el-dropdown-item>
              <el-dropdown-item @click.native="pa(row)">驳回</el-dropdown-item>
              <el-dropdown-item @click.native="delList(row)">
                删除
              </el-dropdown-item>
            </el-dropdown-menu>
            <el-dropdown-menu v-if="false" slot="dropdown">
              <el-dropdown-item @click="edit()">修改发票</el-dropdown-item>
              <el-dropdown-item v-if="false">上传发票</el-dropdown-item>
              <el-dropdown-item @click.native="delList(row)">
                删除
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      :current-page="queryForm.page"
      :page-size="queryForm.list_row"
      :layout="layout"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <!-- 查看 -->
    <el-dialog title="详情" :visible.sync="dialogDetail">
      <div class="detail-cont" :model="details">
        <div class="list">
          开票科目编号:
          <span>{{ details.subject_id_text }}</span>
        </div>
        <div class="list">
          价税合计总额:
          <span>{{ details.total_money }}</span>
        </div>
        <div class="list">
          开票月份:
          <span>{{ details.billing_date }}</span>
        </div>
        <div class="list">
          开票状态:
          <span>{{ details.status }}</span>
        </div>
        <div class="list">
          驳回理由:
          <span>{{ details.reject }}</span>
        </div>
        <div class="list">
          快递公司:
          <span>{{ details.express_company }}</span>
        </div>
        <div class="list">
          快递单号:
          <span>{{ details.express_number }}</span>
        </div>
        <div class="list">
          发票照片:
          <span>
            <img style="width: 150px" :src="details.bill_img" />
          </span>
        </div>
      </div>
    </el-dialog>

    <!-- 驳回理由 -->
    <el-dialog title="驳回理由" :visible.sync="dialogPass">
      <el-form :model="pass">
        <el-form-item label="平台用户:">
          <el-input v-model="pass.name" :rows="15" disabled />
        </el-form-item>
        <el-form-item label="驳回理由:" required>
          <el-input v-model="pass.content" type="textarea" :rows="15" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogPass = false">取 消</el-button>
        <el-button type="primary" @click="send()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 发票信息 -->
    <el-dialog title="发票信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="发票照片:">
          <el-upload
            class="uploads"
            action=""
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :http-request="uploadImg"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="快递公司:">
          <el-input v-model="form.com" :rows="15" />
        </el-form-item>
        <el-form-item label="快递单号:">
          <el-input v-model="form.num" :rows="15" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="pass()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getBillingLists,
    getSearchItemss,
    getBillingDetailss,
    approveBillings,
    delBillings,
  } from '@/api/common'
  import FileSaver from 'file-saver'
  import XLSX from 'xlsx'

  export default {
    name: 'Invoice',
    data() {
      return {
        statu: [
          {
            value: '待审核',
            label: '待审核',
          },
          {
            value: '已驳回',
            label: '已驳回',
          },
          {
            value: '开票中',
            label: '开票中',
          },
          {
            value: '已开票',
            label: '已开票',
          },
        ],
        num: [],
        queryForm: {
          account: '',
          name: '',
          status: '',
          num: '',
        },
        form: {
          com: '',
          num: '',
        },
        pass: {
          name: '',
          content: '',
        },
        disabled: false,
        listLoading: false,
        list: [
          {
            id: 1,
            account: '123456',
            name: '名称',
            statu: 1,
            number: '999',
            price: '4399',
            create_time: '2021-01-01 12:01',
          },
        ],
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        dialogFormVisible: false,
        details: '',
        dialogDetail: false,
        dialogPass: false,
        inid: '',
      }
    },
    created() {
      this.getData()
      getSearchItemss().then((data) => {
        this.num = data.data.invoiceItems
      })
    },
    methods: {
      uploadImg() {},
      handleRemove() {},
      handlePictureCardPreview() {},
      handleDetail() {},
      //搜索
      search() {
        this.getData()
      },
      restart() {
        this.queryForm = []
        this.getData()
      },
      //导出
      handleExport() {
        /* 从表生成工作簿对象 */
        var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
        /* 获取二进制字符串作为输出 */
        var wbout = XLSX.write(wb, {
          bookType: 'xlsx',
          bookSST: true,
          type: 'array',
        })
        try {
          FileSaver.saveAs(
            //Blob 对象表示一个不可变、原始数据的类文件对象。
            //Blob 表示的不一定是JavaScript原生格式的数据。
            //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
            //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
            new Blob([wbout], { type: 'application/octet-stream' }),
            //设置导出文件名称
            'outsheet.xlsx',
          )
        } catch (e) {
          if (typeof console !== 'undefined') console.log(e, wbout)
        }
        return wbout
      },
      getData() {
        let params = {
          page: this.queryForm.page,
          limit: this.queryForm.list_row,
          status: this.queryForm.status,
          company_name: this.queryForm.name,
          mobile: this.queryForm.account,
          subject_id: this.queryForm.num,
        }
        getBillingLists(params).then((data) => {
          this.list = data.data
          this.total = data.count
        })
      },
      arrow(row) {
        let params = {
          id: row.id,
          status: '开票中',
        }
        approveBillings(params).then((data) => {
          this.$message.success('操作成功！')
          this.getData()
        })
      },
      pa(row) {
        this.dialogPass = true
        this.pass.name = row.mobile
        this.inid = row.id
      },
      send() {
        let params = {
          id: this.inid,
          status: '已驳回',
          reject: this.pass.content,
        }
        approveBillings(params).then((data) => {
          this.$message.success('操作成功！')
          this.getData()
        })
      },
      detail(row) {
        this.dialogDetail = true
        let params = {
          id: row.id,
        }
        getBillingDetailss(params).then((data) => {
          this.details = data.data
          // this.userfor = data.data.appid_info
        })
      },
      delList(row) {
        let params = {
          id: row.id,
        }
        delBillings(params).then((data) => {
          this.$message.success('删除成功！')
          this.getData()
        })
      },
      setSelectRows() {},
      handleSizeChange(val) {
        this.queryForm.list_row = val
        this.getData()
      },
      handleCurrentChange(val) {
        this.queryForm.page = val
        this.getData()
      },
      edit(id) {
        this.dialogFormVisible = true
        this.form.content = ''
        sessionStorage.setItem('order_id', id)
      },
      pics(row) {
        this.dialogFormVisible1 = true
        this.payimg = row.pay_img
      },
    },
  }
</script>

<style lang="scss" scoped>
  .el-button {
    font-size: 14px;
    margin-right: 20px;
  }
  .detail-cont {
    .list {
      margin-bottom: 20px;
      span {
        margin-left: 20px;
      }
    }
  }
</style>
